<template >
  <div class="div">
    <div class="search">
      <el-input v-model="input3" placeholder="请输入标题" class="input-with-select">
        <template #prepend>
          <el-select v-model="select" placeholder="请选择分类" style="width: 160px" clearable>
            <el-option v-for="item in TypeList.options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" style="width: 50px" />
        </template>
      </el-input>
    </div>
    <div style="padding: 0px 20px 0px 20px;">
      <el-table  :data="blog" style="width: 100%;font-size: 10px" border :fit="true"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }" :row-style="{ height: '40px', }">
        <el-table-column type="index" :index="indexMethod" align="center" />
        <el-table-column prop="blog_id" label="id" align="center" v-if="false" />
        <el-table-column prop="blog_title" label="标题" align="center" />
        <el-table-column prop="type_name" label="分类" align="center" />

        <el-table-column prop="blog_status" label="状态" align="center" />
        <el-table-column prop="create_time" label="创建时间" align="center" />
        <el-table-column prop="update_time" label="修改时间" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row.blog_id)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDel(row.blog_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block" style="padding: 20px;">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage" :page-sizes="[1, 2, 3, 4]" :page-size="pageSize"
        layout="total,sizes, prev, pager, next" :total="total">
      </el-pagination>
    </div>
    <BlogEditDialog :visible="dialogVisible" :blogId="editedBlog.id" @save="saveEdit" @close="dialogVisible = false" />
  </div>
</template>
  
<script lang="ts" setup>
import { GetType, admingetblog, DelBlog } from '@/http';
import { onMounted, reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import BlogEditDialog from "../../components/admin/BlogEditDialog.vue"

// 使用 ref 创建响应式变量
const dialogVisible = ref(false);
const editedBlog = ref({ id: 0 });

// 处理编辑按钮点击事件
const handleEdit = (id:number) => {
  // 将博客 ID 赋值给 editedBlog
  editedBlog.value.id= id;
  console.log('编辑博客', editedBlog.value.id);
  // 显示对话框
  dialogVisible.value = true;
};

// 处理保存编辑事件
const saveEdit = (editedData:any) => {
  // 实现保存编辑操作，可以调用后端接口等
  console.log('保存编辑', editedData);
  // 关闭对话框
  dialogVisible.value = false;
};

//import type { TableColumnCtx } from 'element-plus'
const indexMethod = (index: number) => {
  return ++index
}
const input3 = ref('')
const select = ref()
const blog = ref()
const TypeList = reactive({
  options: [{
    value: 0,
    label: ''
  }],
})

async function handleDel(blog_id: number) {
  const blog = {
        blog_id: blog_id,
    }
  const res = await DelBlog(blog)
  const data = res.data;
  if (data.result>0) {
    ElMessage({
      message: '删除成功!',
      type: 'success',
    })
    // 重新加载数据
    getblogs();
  }
  else {
    ElMessage.error('删除失败!')
  }
}

onMounted(async () => {
  await Promise.all([getblogs(), GetTypes()])
  // console.log("TypeList.options:", TypeList.options)
  // console.log("select:", select.value)
})
async function getblogs() {
  //根据当前页数和每页显示条数请求对应数据
  let BlogReqs = {
    blog_id: 0,
    type_id: 0,
    page: currentPage.value,
    pageSize: pageSize.value
  }
  const data = await admingetblog(BlogReqs)
  //更新表格数据
  blog.value = data.data.result.list
  total.value = data.data.result.total
}
async function GetTypes() {
  const res = (await GetType()).data.result
  TypeList.options = res.map((item: { type_id: number, type_name: string }) => ({
    value: item.type_id,
    label: item.type_name,
  }))
}
/* const filteredData = () => {
  if(select.value||input3.value){
    return 1
  }
  else{
    return blog;
  }
  return blog.value.filter((item: { type_id: number, blog_title: string }) => {
    const titleMatch = item.blog_title.includes(input3.value);
    const categoryMatch = select.value === '' || item.type_id === select.value;
    return titleMatch && categoryMatch;
  });
}; */

/* const booktypefilter = (type:nu) => {
  const obj = bookTypeOptions.value.find((o) => o.type === type)
  return obj ? obj.info : null
} */


const currentPage = ref(1);//当前页数，初始值为 1
const pageSize = ref(2);//每页显示条数，初始值为 10
const total = ref(0); // 总条数
// if (blog && blog.value) {
//     console.log(blog.value.length); // 检查是否能正确获取长度
// }

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getblogs();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  // 根据当前页数请求对应数据
  getblogs();
};
</script>
<style lang="scss" scoped>
.div {
  border: 1px solid rgb(235, 238, 245);
  background-color: rgb(255, 255, 255);
}

.search {
  width: 50%;
  padding: 20px;
}
</style>
  